function FoodComponent(template) {
	
	this.model = null;  // 维护model
	this.template = template;
	
	this.loadAllData=function(){
		up.ajax("GET","/meat/sec/food/list",null,null,this,
			function(callback){
				console.log(callback)
				if(callback.code == 200){
					model = callback.data;
					_render(model);
				}else{
					swal("The server is down");
				}
				
			});
	}

	this.modifyData=function(menu,filesID){

		up.upload("/meat/sec/food/fmodify", menu,filesID, function(callback) {
			if(callback.code ==200){
				
				swal("Modify success!");
				
				model=model.filter(function(item){
					return item.id!=callback.data.id;
				});

				if(model == null){
					model = callback.data;
				}else{
					model.push(callback.data);
				}
				
				_render(model);
//				window.location.reload();
			} else{
				swal("Modify Fail!");  
			} 
			
			
			$("#updateModal").modal('hide');
			
			
		},null);

	}

	this.addData=function(menu,filesID){

		up.upload("/meat/sec/food/add", menu,filesID, function(callback) {
			if(callback.code ==200){
				swal("Add success!"); 
				if(model == null){
					model = callback.data;
				}else{
					model.push(callback.data);
				}
				
				_render(model);
			} else{
				swal("Add Fail!");  
			} 
			
			$("#addModal").modal("hide");
			
			
		},null);

	}

	function _deleteData(id){

		up.ajax("DELETE","/meat/sec/food/del?id="+id,null,null,this,
			function(callback){
				console.log(callback)
				if(callback.code == 200){
					swal("Deleted!", "Your imaginary file has been deleted.", "success");
					model=model.filter(function(item){
						return item.id!=callback.data.id;
					});
					_render(model);
				}else{
					swal(callback.msg);
				}
				
			});
	}


	function _loadDataById(id) {
		
		up.ajax("POST","/meat/sec/food/goup?id="+id,null,{
			"content-Type" : "application/json"
		},this,
		function(callback){
			console.log(callback)
			if(callback.code == 200){
				$("#update_id").val(callback.data.id);
				$("#update_name").val(callback.data.name);
				$("#update_price").val(callback.data.price); 

			}else{
				swal(callback.msg);
			}

		});
		


	}




	function _addDataOnTable(item){
		$(template).append(
			"<tr id ="+ item.id+" class=' '" +">"+
			"<th>"+item.id+"</th>"+ 
			"<th>"+item.name+"</th>"+ 
			"<th>"+item.price+"</th>"+
			"<th><img style='width:40px;height:40px' src="+item.img+"?"+Date.parse(new Date()) +" name="+item.id+" class='img'/></td></th>"+
			"<th>"+item.typeName+"</th>"+
			"<th><Button    name="+item.id+" class='btn btn-success modify'>Modify</Button></th>"+
			"<th><Button    name="+item.id+" class='btn btn-danger delete'>Delete</Button></th></tr>"
			);
		$(".img[name="+item.id+"]").on("click",function(){
			var src = $(this).attr("src");
			$("#modal-img-target").attr("src", src);
			$("#modal-img").modal("show");
		})
		
		$("button:contains(Delete)").on("click",function(){
			swal({
				title: "Are you sure?",
				text: "You will not be able to recover this imaginary data!",
				type: "warning",
				showCancelButton: true,
				confirmButtonColor: "#DD6B55",
				confirmButtonText: "Yes, delete it!",
				closeOnConfirm: true
			},	
			function(){
				_deleteData(item.id);
			});
		});
		
		$("button:contains(Modify)").on("click",function(){
			swal({
				title: "Are you sure?",
				text: "You will not be able to recover this imaginary data!",
				type: "warning",
				showCancelButton: true,
				confirmButtonColor: "#DD6B55",
				confirmButtonText: "Yes, modify it!",
				closeOnConfirm: true
			},
			function(){
				_loadDataById(item.id);
				$("#updateModal").modal('show'); 
			});

		});

		

	}


	function _removeDataFromTable(id){
		$("tr[id="+id+"]").remove();
	};

	function _render(data){
		template.empty();
		data.forEach((item)=>{
			_addDataOnTable(item);
		})

	}


};


